<div class="np-upload-container">
    {assign name="$value" value="$data.attrs.value ?? ''"/}
    {if is_array($value)}{assign name="$value" value=":json_encode($value)"/}{/if}
    <input type="hidden"
        {foreach $data.attrs as $key => $attr}
        {if $key != 'value'}
        {$key}='{$attr | raw}'
        {/if}
        {/foreach}
        value='{$value | raw}'
    >
    <a class="np-upload layui-btn layui-btn-normal layui-btn-radius"><i class="layui-icon layui-icon-upload-drag"></i> {$data.attrs['data-upload-text']}</a>
    {if !$data.attrs['data-auto']}
    <a class="np-upload-bind layui-btn layui-btn-danger layui-btn-radius">确定上传</a>
    {/if}
    <ul class="file-preview  {if $data.elem == 'multiple_image' || $data.elem == 'multiple_file'}is-sortable{/if}">
        {if !empty($data.attrs.value)}
            {assign name="$value" value="$data.attrs.value"/}
            {if is_string($value)}{assign name="$value" value=":array($value)"/}{/if}

            {foreach $value as $src}
            {assign name="$extension" value=":get_extension($src)"/}
            <li data-src="{$src}" class="preview-item is-upload">
                {if in_array($extension, ['png', 'gif', 'jpg', 'jpeg', 'webp'])}
                <div class="thumb"><img src="{$src}" onerror="this.src='/static/images/fileicon/file.png'"></div>
                {else}
                <div class="thumb"><img src="/static/images/fileicon/{$extension}.png" onerror="this.src='/static/images/fileicon/file.png'"></div>
                {/if}
                <div class="action">
                    <a class="file-delete"><i class="layui-icon layui-icon-delete"></i></a>
                </div>
            </li>
            {/foreach}

        {/if}
        <!--
        <li>
            <div class="thumb"><img src="/static/images/test.jpg" ></div>
            <div class="progress"><i>20%</i></div>
            <div class="action">
                <a class="preview-delete"><i class="layui-icon layui-icon-delete"></i></a>
                <a class="file-delete"><i class="layui-icon layui-icon-delete"></i></a>
            </div>
        </li>
        <li>
            <div class="thumb"><img src="/static/images/test.jpg" ></div>
            <div class="progress"><i>20%</i></div>
            <div class="action">
                <a class="preview-delete"><i class="layui-icon layui-icon-delete"></i></a>
                <a class="file-delete"><i class="layui-icon layui-icon-delete"></i></a>
            </div>
        </li>
        -->
    </ul>
</div>